﻿@{
     WebSecurity.RequireAuthenticatedUser();
    Layout = "~/_SiteLayout.cshtml";
    Page.Title = "CUSTOMER SEARCH";
    Page.Region = RefDataManager.GetRegionLkUpVal();
    Page.IDType = RefDataManager.GetIDTypeLkUpVal();
    
    
    
}

<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>

<script>
     $(function(){
        
        wireEvents();
    });
    
  function wireEvents(){
       $(".validation-error").hide(); 
       applyDatePicker("#bdate");
        GetLookUp("#region","#country","country");
        GetLookUp("#country","#state","state");
        
        document.onkeypress = processKey;

        $("#fname").focus();
        $("#search").click(function(){
         
        if(validateForm()){
             searchCustomer();  
        } 
        
        //loadGrid();
         });
        
        $("#clear").click(function(){
            clearForm("#custSearchForm");
        });
        
         $("#results" ).tabs();
        $("#button2").children().button();
        showSpinner();
}  

function processKey(e)
{
  if (null == e)
    e = window.event ;
  if (e.keyCode == 13)  {
     if(validateForm()){
             searchCustomer();  
        }
  }
}

function searchCustomer(){
    var data = $("#custSearchForm").serialize();
  /* $.post("/Customer/Services/CustomerService/search",data,
        function(data){
         var results=data[0];
         if(results>=1){
             $("#message").html("<p class='message error'>Customer may have duplicates</p>");
             $("#hasDup").val(1);
           }else{
               $("#message").empty();
                $("#hasDup").val(0);
            }
          loadGrid();
    },"json");*/
    
    
    $.ajax({
            url:"/Customer/Services/CustomerService/search",
            async:false,
            cache:false,
            dataType:'json',
            data:data,
            success: function(data){
                var results=data[0];
                if(results>=1){
                    $("#message").html("<p class='message error'>Customer may have duplicates</p>");
                    $("#hasDup").val(1);
                }else{
                    $("#message").empty();
                        $("#hasDup").val(0);
                    }
                 loadGrid();   
            }
            
         });
    
    
   
 }
    
function clearForm(form) {
  // iterate over all of the inputs for the form
  // element that was passed in
  $(':input', form).each(function() {
    var type = this.type;
    var tag = this.tagName.toLowerCase(); // normalize case
    // it's ok to reset the value attr of text inputs,
    // password inputs, and textareas
    if (type == 'text' || type == 'password' || tag == 'textarea')
      this.value = "";
    // checkboxes and radios need to have their checked state cleared
    // but should *not* have their 'value' changed
    else if (type == 'checkbox' || type == 'radio')
      this.checked = false;
    // select elements need to have their 'selectedIndex' property set to -1
    // (this works for both single and multiple select elements)
    else if (tag == 'select')
      this.selectedIndex = -1;
  });
};



function loadGrid(){
    var formData =  $("#custSearchForm").serialize();
    $("#grid").empty();
    
     
    var dummy = new Date().getTime();
    $.get("/Customer/CustomerGrid/",formData+"?date="+dummy,function(data){
        $("#grid").html(data); 
    });
    
   // $("#grid").load("/Customer/CustomerGrid/",formData);
}

    
function validateForm(){
    var fname = $("#fname").val();
    var mname = $("#mname").val();
    var lname = $("#lname").val();

    var bDate =$("#bdate").val();
    
    //hide error labels
     $(".validation-error").hide();
   /* if(fname==""){
      //$("label#fname_error").show();  
      $("input#fname").focus();
      showErrorMessage("First name is required");
      errorCssOn("input#fname");
      return false;  
    }else{
      errorCssOff("input#fname");
        
    }*/
    
   /* if(mname==""){
      $("label#mname_error").show();  
      $("input#mname").focus();  
      return false;  
    }*/
    
   /* if(lname==""){
      //$("label#lname_error").show();
      showErrorMessage("Last name is required");
      $("input#lname").focus();
      errorCssOn("input#lname");
 
      return false;  
    }else{
        errorCssOff("input#lname");
    }*/
    
    /*if(bDate==""){
      $("label#bdate_error").show();  
      $("input#bdate").focus();  
      return false;  
    }*/
  

    
    
    
    return true;
    
    
}   
function showErrorMessage(message){
    $('#message').html("<p class='message error'>"+message+"</p>");
    window.setTimeout(hideMessage,5000);
}


function hideMessage(){
    $("#message").empty();
}
</script>
<div id="message"></div>
<form method="post" id="custSearchForm">
    
    <input type="hidden" name="hasDup" id="hasDup"/>
     <div id="spinner" class="spinnerContent" >
                    <img id="img-spinner" src="@Href("/images/ajax-loader.gif")" alt="Loading"/>
                    <p>Searching customers please wait...</p>
                </div>
    <div id="spinnerBG"></div>
    <div id="message" ></div>
   
    <div>
      <fieldset class="ui-widget ui-widget-content">
        <legend>Search Parameters</legend>
            
   <div  style="float:left">   
    <p><label for="fname">FIRST NAME:</label></p>
      <p><input type="text" name="fname" " id="fname"/><em>*</em></p>
     <label for="fname" id="fname_error" class="validation-error">This field is required </label>  
     <p><label for="mname">MIDDLE NAME:</label></p>
     <p><input type="text" name="mname" id="mname" /></p>
     <label for="mname" id="mname_error" class="validation-error">This field is required </label>         
     <p><label for="lname">LAST NAME:</label></p>
      <p><input type="text" name="lname" id="lname" /><em>*</em></p>
     <label for="lname" id="lname_error" class="validation-error">This field is required </label>        
    </p>
    <p>
    <label for="">BIRTHDAY:</label></p>
    <p><input type="text" id="bdate" name="bdate" />
     <label for="bdate" id="bdate_error" class="validation-error">This field is required </label>      
   </p>
   </div>
   <div  style="float:left">   
        
    <p><label for="region">REGION:</label></p>
    <p><select name="region" id="region">
        <option id="default_region"></option>
        @foreach(var region in Page.Region){
            <option value="@region.RefID">@region.RefDesc</option>
        }
        
    </select>   
    </p>
     <p><label for="country">COUNTRY:</label></p>
    <p><select name="country" id="country">
       <option id="default_country"></option>
        
    </select>    
    </p>       
    <p><label for="state">STATE:</label></p>
    <p><select name="state" id="state">
     <option id="default_state"></option>
     </select>
        
    </p>
    <p><label for="zip">ZIPCODE:</label></p>
    <p><input type="text" style="width:100px" id="zip" name="zip"/>
    </p>
    </div>
     <div  style="float:left;margin:0 1em">   
    <p> <label for="idType">ID Type:</label></p>
    <p> <select name="idType" id="idType">
        <option id="default"></option>
        @foreach(var item in Page.IDType){
            <option value="@item.RefID">@item.RefDesc</option>
        }
    </select>    
    </p>    
          
    <p><label for="idNum">ID Number:</label></p>     
     <p><input type="text"  name="idNumber" id="idNum"/>   
    </p>
    </div>
     <div>   
      
    <p><label>MOBILE NO.</label></p>
    <p>
    <input type="text" style="width:100px" name="mobileCC"/>-<input type="text" style="width:100px" size="3" name="mobileAC"/>-<input type="text" size="4" name="mobileNo"/>
    (Country Code + Area Code + Phone No)
    </p>
     </div>
   <div>     
    <p>
    <label>LANDLINE NO.</label>
   </p>
    <p>
   <input type="text" style="width:100px" name="landlineCC"/>-<input type="text" style="width:100px" name="landlineAC"/>-<input type="text" name="landlineNo"/>
        (Country Code + Area Code + Phone No)
        </p>
    </div>
    </fieldset>
     
    </div>    
    <div id="buttons">
        <input type="button" id="search"  value="search"/>
        <input type="button" id="clear" value="clear"/>
            
        
    </div>
  <div id="grid"></div>
   
</form>

